<template>
  <el-popover
    placement="right"
    :title="$t('voluntaryDept.item.bgr')"
    :width="200"
    trigger="click"
    @before-enter="handleShow"
  >
    <template #reference>
      <el-icon class="ml5" style="cursor:pointer;"><elementView/></el-icon>
    </template>
    <div v-loading="loading">
      <div>{{$t('voluntaryDept.item.xm')}}：{{ formData.username }}</div>
      <div>{{$t('voluntaryDept.item.dprt')}}：{{ formData.departmentName }}</div>
    </div>
  </el-popover>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs } from "vue";

export default defineComponent({
  name: "anonymousContentViewer",
  props: {
    username: String,
    departmentName: String,
  },
  setup(props) {
    const state = reactive({
      loading: false,
      formData: {
        username: '',
        departmentName: '',
      }
    });


    onMounted(() => {});

    const handleShow = () => {
      state.loading = true;
      setTimeout(() => {
        state.formData.username = props.username;
        state.formData.departmentName = props.departmentName;
        state.loading = false;
      }, 500);
    }

    return {
      ...toRefs(state),
      handleShow,
    };
  },
});
</script>
